<template>
  <!-- 表单 -->
  <el-card style="margin-bottom: 10px">
    <el-button icon="Plus" type="primary" size="default" @click="handleAdd"
      >新增</el-button
    >
    <el-table style="margin: 10px 0px" :data="ListArr">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column
        label="标题"
        prop="title"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="图标" prop="icon">
        <template #default="scope">
          <el-image
            :preview-teleported="true"
            style="width: 80px; height: 80px"
            :preview-src-list="[scope.row.icon]"
            :src="scope.row.icon"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        prop="createBy"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip>
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150px">
        <template #default="scope">
          <el-button
            type="primary"
            link
            size="small"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            :title="`你确定要删除吗?`"
            width="260px"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button link type="danger" size="small" icon="Delete"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 分页 -->
  <el-card>
    <pagination
      :pageNum="pageNum"
      :pageSize="pageSize"
      :total="total"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
  </el-card>
  <!-- 新增或者编辑 -->
  <drawer ref="drawerRef" @cancel="handleCancel" @submit="handleSubmit">
    <template v-slot:title>
      <h4>{{ formParams.id ? "编辑" : "添加" }}</h4>
    </template>
    <template v-slot:content>
      <el-form
        ref="formRef"
        label-width="auto"
        :model="formParams"
        :rules="rules"
      >
        <el-form-item label="名称" prop="title">
          <el-input v-model="formParams.title"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <upload-comp
            :fileList="fileList"
            @handleSuccess="handleSuccess"
          ></upload-comp>
        </el-form-item>
      </el-form>
    </template>
  </drawer>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { formatDateTime } from "@/utlis/datetime";
import { reqSave, reqFindPage, reqDelete } from "@/api/web/category";
import { validatorNames } from "@/utlis/validator";
import { ElMessage } from "element-plus";
const ListArr = ref([]);
const drawerRef = ref();
const fileList = ref([] as any);
const formRef = ref();
//默认页码
const pageNum = ref<number>(1);
//一页展示几条数据
const pageSize = ref<number>(5);
//用户总个数
const total = ref<number>(0);
const formParams = reactive({
  id: undefined,
  title: "",
  icon: "",
});
onMounted(() => {
  inintData();
});
//初始化数据
const inintData = async () => {
  const perams = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  const res = await reqFindPage(perams);
  if (res.code == 200) {
    total.value = res.data.totalSize;
    ListArr.value = res.data.content;
  }
};
//分页器下拉菜单的自定义事件的回调
const handleCurrentChange = (val: number) => {
  pageNum.value = val;
  inintData();
};
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  inintData();
};
//新增
const handleAdd = () => {
  drawerRef.value.open();
  //清空数据
  Object.assign(formParams, {
    id: undefined,
    title: "",
    icon: "",
  });
  fileList.value = [];
  nextTick(() => {
    formRef.value.clearValidate("title");
  });
};
//编辑
const handleUpdate = (row: any) => {
  handleAdd();
  //存储收集已有的账号信息
  Object.assign(formParams, row);
  if (formParams.icon) {
    fileList.value.push({ url: formParams.icon });
  }
};
//删除
const handleDelete = async (id: any) => {
  let params = [];
  let idArray = (id + "").split(",");
  for (let i = 0; i < idArray.length; i++) {
    params.push({ id: idArray[i] });
  }
  const res = await reqDelete(params);
  if (res.code === 200) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    inintData();
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
};
//关闭弹框
const handleCancel = () => {
  drawerRef.value.close();
};
//提交
const handleSubmit = async () => {
  await formRef.value.validate();
  //按钮加载
  drawerRef.value.showloading();
  let params: any = Object.assign({}, formParams);
  const res = await reqSave(params);
  //添加或者更新成功
  if (res.code == 200) {
    //关闭抽屉
    handleCancel();
    //提示消息
    ElMessage({
      type: "success",
      message: formParams.id ? "编辑成功" : "添加成功",
    });
    drawerRef.value.hideloading();
    //获取最新的全部账号的信息
    inintData();
  } else {
    //关闭抽屉
    handleCancel();
    //提示消息
    ElMessage({
      type: "error",
      message: res.msg,
    });
    drawerRef.value.hideloading();
  }
};
//上传图片
const handleSuccess = (file: any) => {
  const arr = new Array();
  console.log(file, "3333333");
  if (Object.keys(file).length == 0) {
    fileList.value = [];
  } else {
    arr.push(file);
    fileList.value = arr;
    formParams.icon = file.url;
  }
};
//表单校验的规则对象
const rules = {
  //名称
  title: [{ required: true, trigger: "blur", validator: validatorNames }],
};
</script>
<style lang="scss" scoped></style>
